<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;

$this->title = 'create';
?>
<style>
	#uploadPreview{cursor:pointer;}
	#uploadImage{display:none;}
</style>
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box-header"><h2 class="box-title"><?php if ($model->id){?>修改产品信息<?php } else {?>新增产品<?php }?></h2></div>
			<div class="box-body add_department">
				<?php $form = ActiveForm::begin(['action' => ['product/create', 'id' => $model->id], 'method' => 'post']);?>
					<div class="box-body">
						<div class="form-group">
							<label for="deparment_uname">产品名称</label>
							<?=Html::textInput('name', $model->name, ['class' => 'form-control', 'placeholder' => '请输入产品名称']);?>
						</div>
						<div class="form-group">
							<label>产品价格</label>
							<?=Html::textInput('price', $model->price, ['class' => 'form-control', 'placeholder' => '请输入产品价格']);?>
						</div>
						<div class="form-group">
							<label>产品展示图</label><br>
							<label for="uploadImage"><img id="uploadPreview" style="width: 100px; height: 100px;" src="<?= ($model->pro_img) ? Yii::$app->params['upload_file'] . $model->pro_img: 'img/upload.png'?>" alt="Image preview" /></label>
							<?= $form->field($model, 'pro_img')->fileInput(['id' => 'uploadImage', 'onchange' => 'loadImageFile();']) ?>
						</div>
					</div>
					<div class="box-footer">
						<button type="submit" class="btn btn-primary">确定</button>
					</div>
				<?php ActiveForm::end();?>
			</div>
		</div>
	</div>
</section>


<script type="text/javascript">
	oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

	oFReader.onload = function (oFREvent) {
	  document.getElementById("uploadPreview").src = oFREvent.target.result;
	};

	function loadImageFile() {
	  if (document.getElementById("uploadImage").files.length === 0) { return; }
	  var oFile = document.getElementById("uploadImage").files[0];
	  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
	  oFReader.readAsDataURL(oFile);
	}
</script>